/**
 * Created by user on 2/15/19.
 */
import React from 'react'
import { connect } from 'react-redux'

import { VoicePlayer, Type, EventCenter, Request } from '@utils/Global'
import { ReplayAction, MainAction } from '@act'
import { Storage, Keys } from '@utils/LocalStorage'

class AnswerItem extends React.Component {
  clickZanAnswer = () => {
    const { item, dispatch } = this.props
    if (item.data.answer.like) {
      return
    }
    dispatch(ReplayAction.doSelfLikeItem({ msgType: 'answer', id: item.data.answer.id }))
    EventCenter.emit('do_replay_zan_request', { type: 'answer', id: item.data.answer.id, from: 'qa' })
  }
  clickImageItem = () => {
    const { url, dispatch } = this.props
    dispatch(MainAction.toggleGlobalBigImage({ url }))
  }
  clickVoice = () => {
    const { item: { voiceStatus }, dispatch, url } = this.props
    const { updateVoiceStatus, stopAllVoice } = ReplayAction
    let status = null
    if (voiceStatus.playing || voiceStatus.loading) {
      status = this.setVoiceStatus(false, false, false, true)
      dispatch(updateVoiceStatus({url, status, type: 'answer'}))
      VoicePlayer.stop()
      return
    }
    dispatch(stopAllVoice())
    status = this.setVoiceStatus(true, false, false, true)
    dispatch(updateVoiceStatus({url, status, type: 'answer'}))
    this.setVoiceHasPlayed()
    VoicePlayer.play(url, () => {
      status = this.setVoiceStatus(false, true, false, true)
      dispatch(updateVoiceStatus({url, status, type: 'answer'}))
    }, () => {
      status = this.setVoiceStatus(false, false, false, true)
      dispatch(updateVoiceStatus({url, status, type: 'answer'}))
    })
  }
  setVoiceStatus = (loading = false, playing = false, error = false, hasPlayed = true) => {
    return {
      loading: loading,
      playing: playing,
      error: error,
      hasPlayed: hasPlayed
    }
  }
  setVoiceHasPlayed() {
    const { url } = this.props
    const playedList = Storage.read(Keys.QA_VOICE_KEY) || []
    if (playedList.indexOf(url) < 0) {
      playedList.push(url)
      Storage.save(Keys.QA_VOICE_KEY, playedList)
    }
  }
  renderStatus() {
    const { item: { voiceStatus }} = this.props
    if (!voiceStatus.hasPlayed) {
      return <div className="red_point"></div>
    } else if (voiceStatus.loading) {
      return (
        <div className="voice_loading">
          <img className="voice_loading_icon" src={require('@images/indicator_verybig.gif')} alt=""/>
        </div>
      )
    } else {
      return null
    }
  }
  renderTop() {
    const { item } = this.props
    if (item.data.answer.data.type === 0) {
      return (
        <div className="answer_top_text">
          {item.data.answer.data.text}
        </div>
      )
    }
    if (item.data.answer.data.type === 1) {
      const _time = Math.ceil(item.data.answer.data.record_time / 1000)
      const _src = item.voiceStatus.playing ? require('@images/question/voice_icon_animate.gif') : require('@images/question/voice_icon.png')
      return (
        <div onClick={this.clickVoice} className="answer_top_voice">
          <img className="voice_icon" src={_src} />
          <div className="time"> { _time }" </div>
          { this.renderStatus() }
        </div>
      )
    }
    if (item.data.answer.data.type === 2) {
      return (
        <div onClick={this.clickImageItem} className="answer_top_image" style={{backgroundImage: `url(${item.data.answer.data.file})`}}>

        </div>
      )
    }
  }
  renderZan() {
    const { item } = this.props
    let icon = require(`@images/question/zan_icon${item.data.answer.like ? '_active' : ''}.png`)
    let zanText = item.data.answer.up_num > 0 ? `+${item.data.answer.up_num}` : '点赞支持'
    return (
      <div className="answer_zan_con">
        <div className="answer_zan">
          <div className={`zan_icon_out ${item.data.answer.like ? 'active' : ''}`} onClick={this.clickZanAnswer}>
            <img className="zan_icon" src={icon} alt=""/>
          </div>
          <div className="zan_text">{zanText}</div>
        </div>
      </div>
    )
  }
  renderUsers() {
    let list = this.props.item.data.answer.users.slice(0, 5).map((u, i) => {
      return <img key={i} className="s_user" src={u.headimgurl}/>
    })
    return(
      <div className="users_con">{list}</div>
    )
  }
  render() {
    const { item, color_theme } = this.props
    let deltaIcon = require(`@images/question/qa_answer_delta${color_theme === 'red' ? '_red' : ''}.png`)
    return (
      <div className={`qa_answer`}>
        <div className="answer_bottom">
          <img className="answer_delta" src={deltaIcon} alt=""/>
          <img className="answer_top_flag" src={require('@images/question/qa_answer_top_flag.png')} alt=""/>
          <div className="answer_bottom_name">
            回复 <span className="small_name">{item.data.question.user.nickname || item.data.question.user.name}</span> 的提问:
          </div>
          <div className="answer_bottom_content">{item.data.question.data.text}</div>
        </div>
        { this.renderTop() }
      </div>
    )
  }
}

const mapState = state => {
  return {
    color_theme: state.MainScreenState.info.color_theme
  }
}

export default connect(mapState)(AnswerItem)
